<template>
  <el-dialog
    v-model="dialogVisible"
    :title="titleComputed"
    width="600px"
    :before-close="close"
  >
    <div v-loading="loading">
      <el-form ref="formRef" :model="formData" label-width="130" :rules="rules">
        <template v-if="formData.parent === '0'">
          <el-form-item :label="valueLabel" prop="dictionaryValue">
            <el-input v-model="formData.dictionaryValue" placeholder="请输入" />
          </el-form-item>
          <el-form-item :label="codeLabel" prop="dictionaryCode">
            <el-input v-model="formData.dictionaryCode" placeholder="请输入" />
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item :label="codeLabel" prop="dictionaryCode">
            <el-input v-model="formData.dictionaryCode" placeholder="请输入" />
          </el-form-item>
          <el-form-item :label="valueLabel" prop="dictionaryValue">
            <el-input v-model="formData.dictionaryValue" placeholder="请输入" />
          </el-form-item>
        </template>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="submit" :loading="loading">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { FormInstance, FormRules } from 'element-plus'
import { addOrUpdateDictionaryEntries } from '@/api/sys/dictionary'
import { computed, reactive, ref, useTemplateRef } from 'vue'
import { Message } from '@/hooks/message'

const formRef = useTemplateRef<FormInstance>('formRef')

const codeLabel = computed(() => {
  return formData.parent === '0' ? '描述：' : '字典标签：'
})

const valueLabel = computed(() => {
  return formData.parent === '0' ? '名称：' : '字典值：'
})

const emit = defineEmits(['update'])

const dialogVisible = ref(false)
const loading = ref(false)
const isNew = ref(true)

const formData = reactive({
  id: undefined,
  dictionaryValue: undefined,
  dictionaryCode: undefined,
  parent: undefined,
})

const rules = reactive<FormRules<typeof formData>>({
  dictionaryCode: {
    required: true,
    message: () => {
      return formData.parent === '0' ? '请输入字典描述' : '请输入字典标签'
    },
    trigger: 'blur',
  },
  dictionaryValue: [
    {
      required: true,
      message: () => {
        return formData.parent === '0' ? '请输入字典名称' : '请输入字典值'
      },
      trigger: 'blur',
    },
    {
      validator: validatorDictionaryValue,
      trigger: 'blur',
    },
  ],
})

const titleComputed = computed(() => {
  if (formData.parent === '0') {
    return isNew.value ? '新增字典' : '编辑字典'
  } else {
    return isNew.value ? '新增字典详情' : '编辑字典详情'
  }
})

function validatorDictionaryValue(rule: any, value: any, callback: any) {
  if (formData.parent === '0' && value === '0') {
    callback(new Error('父级字典名称不能为0'))
  } else {
    callback()
  }
}

defineExpose({ show })

function show(parent: string, row?: any) {
  dialogVisible.value = true
  formData.parent = parent
  if (row) {
    formData.id = row.id
    formData.dictionaryValue = row.dictionaryValue
    formData.dictionaryCode = row.dictionaryCode
    isNew.value = false
  }
}

function close() {
  dialogVisible.value = false
  loading.value = false
  isNew.value = true
  formRef.value.resetFields()
  Object.assign(formData, {
    id: undefined,
    dictionaryValue: undefined,
    dictionaryCode: undefined,
    parent: undefined,
  })
}

async function submit() {
  const bool = await formRef.value.validate()
  if (!bool) return
  loading.value = true
  const { data } = await addOrUpdateDictionaryEntries(formData)
  if (data.status === 200) {
    Message({
      message: '提交成功',
      type: 'success',
    })
  }
  loading.value = false
  emit('update', formData.parent)
  close()
}
</script>
<style scoped lang="scss"></style>
